<template>
  <div>
    <div class="title">查询出入库记录</div>
    <base-list ref="inOutRecord"
               :condition="condition"
               :datas.sync="data"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               ref="aList"
               label-width="100px">
        <el-row>
          <el-col :span="6"
                  class="search-width6">
            <el-form-item label="出入库类型"
                          prop="condition['search_EQ_recordType']"
                          class="label-width">
              <el-select v-model="condition['search_EQ_recordType']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="[key, val] in _dictInOutType"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  class="search-width6">
            <el-form-item label="出入库方式"
                          class="label-width">
              <el-select v-model="condition['search_EQ_inOutWay']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="(item,index) in inWayList"
                           :key="index"
                           :label="item.name"
                           :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  class="search-width6">
            <el-form-item label="货主">
              <auto-search-name placeholder="请选择"
                                @selectId="v=>condition['search_EQ_cargoOwnerId']=v"
                                :name="form.cargoOwnerName"></auto-search-name>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  class="search-width6">
            <el-form-item label="品名">
              <el-select v-model="condition['search_EQ_cargoName']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="(item,index) in cargoNameList"
                           :key="index"
                           :label="item.cargoName"
                           :value="item.cargoCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  class="search-width6">
            <el-form-item label="跟踪号">
              <el-input type="text"
                        v-model="condition['search_LIKE_barcode']"
                        placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width6">
            <el-form-item label="生产厂家"
                          clearable>
              <auto-search-dic v-model="condition['search_EQ_madeBy']"
                               @selectName="v=>condition['search_EQ_madeBy']=v"
                               code="CARGO_SCZ"></auto-search-dic>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  class="search-width6">
            <el-form-item label="验收单号">
              <el-input type="text"
                        v-model="condition['search_LIKE_checkAcceptNo']"
                        placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  class="search-width6">
            <el-form-item label="发货单号">
              <el-input type="text"
                        v-model="condition['search_LIKE_planNo']"
                        placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  class="search-width6">
            <el-form-item label="捆包号">
              <el-input type="text"
                        v-model="condition['search_LIKE_baleNo']"
                        placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width6">
            <el-form-item label="所属仓库">
              <el-select v-model="condition['search_EQ_warehouseCode']"
                         placeholder="请选择">
                <el-option v-for="(item,index) in warehouseList"
                           :key="index"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width6">
            <el-form-item label="库房">
              <auto-search-room-name @select="v=>condition['search_EQ_roomCode']=v"></auto-search-room-name>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width8">
            <el-form-item label="规格"
                          class="gg-input">
              <el-col :span="8">
                <auto-search-dic style="width: 100px;"
                                 @selectName="v=>condition['search_EQ_normOne']=v"
                                 code="CARGO_GGY"></auto-search-dic>
              </el-col>
              <el-col :span="8">
                <auto-search-dic style="width: 100px;"
                                 @selectName="v=>condition['search_EQ_normTwo']=v"
                                 code="CARGO_GGE"></auto-search-dic>
              </el-col>
              <el-col :span="8">
                <auto-search-dic style="width: 100px;"
                                 @selectName="v=>condition['search_EQ_normThree']=v"
                                 code="CARGO_GGS"></auto-search-dic>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="9"
                  class="search-width8">
            <el-form-item label="出入库时间"
                          class="label-width">
              <el-date-picker style="width:150px;"
                              v-model="condition['search_GTE_createDateTime']"
                              type="date"
                              placeholder="选择日期"
                              value-format="yyyy-MM-dd 00:00:00"> </el-date-picker> 至
              <el-date-picker style="width:150px;"
                              v-model="condition['search_LTE_createDateTime']"
                              type="date"
                              placeholder="选择日期"
                              value-format="yyyy-MM-dd 23:59:59"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3"
                  style="width: 190px;">
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="loadData"
                       class="ml-80">查 询</el-button>
            <el-button formVisible="true"
                       icon="el-icon-refresh"
                       @click="resuleBtn('aList')">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table slot="list"
                :data="data"
                border
                :summary-method="getSummaries"
                show-summary
                max-height="550">
        <el-table-column type="expand"
                         width="60">
          <template slot-scope="props">
            <el-form label-position="left"
                     inline
                     class="demo-table-expand">
              <el-col :span="6"
                      class="table-expand-style">
                <el-form-item label="验收单号">
                  <span>{{ props.row.checkAcceptNo}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6"
                      class="table-expand-style">
                <el-form-item label="交接单号">
                  <span>{{ props.row.handoverNo }}</span>
                </el-form-item>
              </el-col>
              <el-col class="table-expand-style">
                <el-form-item label="发货单号">
                  <span>{{ props.row.planNo }}</span>
                </el-form-item>
              </el-col>
              <el-col class="table-expand-style">
                <el-form-item label="捆包号">
                  <span>{{ props.row.baleNo}}</span>
                </el-form-item>
              </el-col>
              <el-col class="table-expand-style">
                <el-form-item label="炉批号">
                  <span>{{ props.row.stoveNo}}</span>
                </el-form-item>
              </el-col>
              <el-col class="table-expand-style">
                <el-form-item label="运输方式">
                  <span>{{ props.row.transportWay | _filterTransportModeType }}</span>
                </el-form-item>
              </el-col>
              <el-col class="table-expand-style">
                <el-form-item label="调账原因">
                  <span>{{ props.row.adjustDesc}}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="序号"
                         type="index"
                         width="50"></el-table-column>
        <el-table-column prop="recordType"
                         label="出入库类型"
                         min-width="80">
          <template slot-scope="scope">
            {{ scope.row.recordType | _filterInOutType }}

          </template>
        </el-table-column>
        <el-table-column prop="inOutWay"
                         label="出入库方式"
                         min-width="120"></el-table-column>
        <el-table-column prop="outOrInTime"
                         label="出入库时间"
                         min-width="100"></el-table-column>
        <el-table-column prop="transhipNo"
                         label="车船号"
                         min-width="60"></el-table-column>
        <el-table-column prop="trackingNo"
                         label="跟踪号"
                         min-width="80"></el-table-column>
        <el-table-column prop="cargoOwnerName"
                         label="货主"
                         min-width="150"></el-table-column>
        <el-table-column prop="cargoName"
                         label="品名"
                         min-width="80"></el-table-column>
        <el-table-column prop="normStr"
                         label="规格"
                         min-width="80"></el-table-column>
        <el-table-column prop="material"
                         label="材质"
                         min-width="80"></el-table-column>
        <el-table-column prop="madeBy"
                         label="生产厂家"
                         min-width="80"></el-table-column>
        <el-table-column prop="num"
                         label="货物件数"
                         min-width="80"></el-table-column>
        <el-table-column prop="countNum"
                         label="货物数量"
                         min-width="80"></el-table-column>
        <el-table-column prop="weight"
                         label="货物重量"
                         min-width="80"></el-table-column>
        <el-table-column prop="lbsDiff"
                         label="实物磅差"
                         min-width="80"></el-table-column>
        <el-table-column prop="warehouseName"
                         label="仓库"
                         min-width="80"></el-table-column>
        <el-table-column prop="roomName"
                         label="库房"
                         min-width="80"></el-table-column>
        <el-table-column prop="roomLocation"
                         label="库位"
                         min-width="80"></el-table-column>
      </el-table>
    </base-list>
    <div style="text-align:center">
      <el-button plain
                 type="info"
                 plain
                 @click="handleRouterPush({path: '/goods/storehouse',name: '仓库管理'})">返回</el-button>
    </div>
    <component :is="component"
               ref="component"
               @load="loadData"
               @clear="component=''"></component>
  </div>
</template>

<script>
import {
  getCargoNameList,
  getCargoOwnerAccount
} from '@/api/things/accountPageList' //品名
import { getEnumList } from '@/api/enter/arrivalForecast' //出入库菜单
import { getInOutRecordList } from '@/api/matter/inOutRecord' //出入库记录列表
import autoSearchName from '@/components/autocomplete/autoSearchName' //货主组件
import autoCargo from '@/components/autocomplete/autoCargo'
import autoSearchRoomName from '@/components/autocomplete/autoSearchRoomName'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import { getWarehouseList } from '@/api/adminWarehouse/adminWarehouse' //所属仓库来源于仓库设置

export default {
  name: 'storehousePlanType',
  components: {
    autoCargo,
    autoSearchName,
    autoSearchRoomName,
    autoSearchDic
  },
  data() {
    return {
      form: this.clearForm(),
      dialogForm: false,
      component: '',
      condition: {}, // 查询条件
      data: [], // table数组
      pmLIst: [], //接口获取的货物属性数据
      warehouseList: [], //仓库
      cargoNameList: null, //品名
      inWayList: [],
      pageSearch: getInOutRecordList // 分页查询api接口
    }
  },
  mounted() {
    //出入库
    getEnumList(3).then(res => {
      this.inWayList = res.data.aaData
    })
    this.$nextTick(() => {
      this.loadData()
    })
    //获取货主
    getCargoOwnerAccount(this.$store.state.user.currentUser.org.id).then(
      res => {
        this.cargoOwnerAccount = res.data.aaData
      }
    )
    //获取品名
    getCargoNameList().then(res => {
      this.cargoNameList = res.data.aaData
    })
    //获取仓库
    getWarehouseList().then(res => {
      this.warehouseList = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name,
        search_EQ_accountPageType: '', //账页类型
        search_EQ_cargoName: '', //品名
        search_EQ_endTime: '', //建账结束时间
        search_EQ_startTime: '', //建账开始时间
        search_EQ_Time: '', //建账时间
        search_EQ_madeBy: '', //生产厂家
        search_EQ_manageWay: '', //管理方式
        search_EQ_material: '', //材质
        search_EQ_measureWay: '', //计量方式
        search_EQ_normOne: '', //规格
        search_EQ_normThree: '',
        search_EQ_normTwo: '',
        search_EQ_warehouseCode: '', //所属仓库
        search_LIKE_accountpageNo: '', //账页号
        search_EQ_cargoOwnerCode: '', //货主单位
        sortType: '' //排序
      }
    },
    loadData() {
      this.$refs.inOutRecord.loadData()
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property === 'balanceWeight') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 吨'
        } else if (column.property === 'balanceNum') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 件'
        } else if (column.property === 'preWeight') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 吨'
        } else if (column.property === 'balanceCount') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 个'
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    resuleBtn(aList) {
      this.$refs[aList].resetFields()
      this.condition = this.clearForm()
    },
    handleRouterPush(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    }
  }
}
</script>

<style>
.control-line {
  height: 30px;
}
.line {
  border-left: solid 5px #00a1ff;
  height: 18px;
  margin-top: 5px;
  display: inline-block;
  vertical-align: sub;
}
.gg-input {
  margin-bottom: 0 !important;
}
.gg-input .el-form-item__content .el-input {
  width: 100px !important;
}
.search-width8 {
  width: 450px;
}
.base-list .search .border-line {
  margin-top: 0px !important;
}
.table-expand-style {
  width: 300px;
}
.table-expand-style label {
  color: #99a9bf;
}
</style>
